<template>
  <div class="subnavcontainer _subnavcontainer">
      <div><i class="iconfont icon-iPhoneSE"></i><span>iPhone SE</span></div>
      <div><i class="iconfont icon-iPhoneX"></i><span>iPhone11 Pro</span></div>
  </div>
</template>

<script>
export default {
name:'',
component:""
}
</script>

<style lang="less" scoped>
@media only screen and(min-width: 800px) {
    .subnavcontainer{
        display: flex;
        justify-content: center;
        align-items: center;
         height: 110px;
        width: 100%;
        background-color: rgb(249, 249, 250);
        div{
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            cursor: pointer;
            i{
                font-size: 50px;
                
            }
            span{
                font-size: 10px;
            }
        }
        div:hover{
             span{
              color: rgb(12, 106, 205);
              font-weight:500;
            }
        }
    }
}
@media only screen and(max-width:800px) {
    .subnavcontainer{
        display: flex;
        justify-content: center;
        align-items: center;
         height: 110px;
        width: 100%;
        background-color: rgb(249, 249, 250);
        div{
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            cursor: pointer;
            i{
                font-size: 50px;
                
            }
            span{
                font-size: 10px;
            }
        }
        div:hover{
             span{
              color: rgb(12, 106, 205);
              font-weight:500;
            }
        }
    }
}
</style>